<template>
  <div>
    <van-nav-bar
      title="城市列表"
      left-arrow
      @click-left="$router.back()"
      fixed="true"
    />
    <!-- :index-list="indexList"这个是右边的索引栏 -->
    <div class="buttom">
      <van-index-bar :index-list="indexList">
        <!-- 2:因为遍历的是对象用的是for in -->
        <div v-for="(item, key) in allObj" :key="key">
          <!--2-1： van-index-anchor的index要跟key一样，这样就联动了 -->
          <!-- 2-2:有三段，分别给不同的标题 -->
          <van-index-anchor :index="key">
            <span v-if="key === '#'" style="color: #777">当前城市</span>
            <span v-else-if="key === '热'" style="color: #777">热门城市</span>
            <!-- 如果都不是则标题就是对应的key -->
            <span v-else>{{ key }}</span>
          </van-index-anchor>
          <!-- 3：最后遍历每个数组，把对应的每项地址名的值给到title -->
          <van-cell
            @click="onClick(item1)"
            :title="item1.label"
            v-for="(item1, index) in item"
            :key="index"
          />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { hotCity, cityList } from '@/api/city'
export default {
  name: 'city-page',
  async created() {
    const {
      data: { body: hotCityList }
    } = await hotCity()
    // console.log(hotCityList) // 拿到数据
    const {
      data: { body: res }
    } = await cityList({ level: 1 })
    // console.log(res) 第一次没有的时候用写死的
    const allObj = {
      '#': [
        JSON.parse(window.localStorage.getItem('city')) || {
          label: '上海',
          value: 'AREA|dbf46d32-7e76-1196',
          pinyin: 'shanghai',
          short: 'sh'
        }
      ],
      热: hotCityList,
      A: [],
      B: [],
      C: [],
      D: [],
      E: [],
      F: [],
      G: [],
      H: [],
      I: [],
      J: [],
      K: [],
      L: [],
      M: [],
      N: [],
      O: [],
      P: [],
      Q: [],
      R: [],
      S: [],
      T: [],
      U: [],
      V: [],
      W: [],
      X: [],
      Y: [],
      Z: []
    }
    // console.log(allObj)
    // allObj.hot = hotCityList
    // 遍历城市列表
    res.forEach((item) => {
      // 一个item是一个对象
      const key = item.short[0].toUpperCase()
      // 把每个对象都放到对应的数组里面
      allObj[key].push(item)
    })
    // this.allObj = allObj
    // 遍历allobj，把所有的值是空数组的这一项属性移除掉
    // console.log(this.allObj)
    for (const key in allObj) {
      if (allObj[key].length === 0) {
        delete allObj[key]
      }
    }
    console.log(allObj)
    // console.log(Object.keys(allObj))是前面的键名，A,B,C...
    // 再把全部的数据给到data
    this.allObj = allObj
    console.log(this.allObj)
  },
  data() {
    return {
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      hotList: [],
      allObj: {},
      city: JSON.parse(window.localStorage.getItem('city')) || {
        label: '上海',
        value: 'AREA|dbf46d32-7e76-1196',
        pinyin: 'shanghai',
        short: 'sh'
      }
    }
  },
  methods: {
    // city就是传过来的每个数组
    onClick(city) {
      // 把这个数组存到本地
      window.localStorage.setItem('city', JSON.stringify(city))
      // 再跳转到响应的页面
      this.$router.push('/index')
    }
  }
}
</script>

<style scoped lang="less">
// 4:给样式 先给对应的索引改 用::v-deep
::v-deep .van-index-bar__index {
  margin: 3px 0;
}
.buttom {
  // 给定位
  position: fixed;
  top: 45px;
  bottom: 0;
  left: 0;
  right: 0;
  // 因为刚开始固定了，是异步的，滚动条没了。所以这里加滚动条
  overflow: auto;
}
</style>
